
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import "./style.css";
import { observable } from 'mobx';
import { observer } from 'mobx-react';

@observer
export class MenuItem extends React.Component<{ title: string; keyboard: string; }, {}>
{
    render()
    {
        return (<li
            className={"context-menu-item"}
        >
            <i style={{
                backgroundImage: `url(${require("./menu_icon.png").default})`,
                backgroundPosition: "-16px -513px",
                display: "inline-block",
                // display: "none",
                backgroundRepeat: "no-repreat",
                height: 16,
                marginRight: 10,
            }} />
            <span>{this.props.title}<b>F5</b>(<span className="context-menu-accesskey">{this.props.keyboard}</span>)</span>
        </li>);
    }
}

let position = observable({
    x: 0, y: 0, show: true
});

@observer
export class App extends React.Component<{}, {}>{
    render()
    {
        return (
            <ul className="context-menu-list"
                style={{
                    display: position.show ? "" : "none",
                    width: 190,
                    left: position.x,
                    top: position.y
                    // height: 100,
                }}
            >
                <MenuItem title={"刷新"} keyboard="E" />
                <MenuItem title={"新建文件夹"} keyboard="N" />
                <MenuItem title={"黏贴"} keyboard="P" />
                <MenuItem title={"排序"} keyboard="Y" />
                <MenuItem title={"刷新"} keyboard="E" />
                <MenuItem title={"新建文件夹"} keyboard="N" />
                <MenuItem title={"黏贴"} keyboard="P" />
                <MenuItem title={"排序"} keyboard="Y" />
                <MenuItem title={"刷新"} keyboard="E" />
                <MenuItem title={"新建文件夹"} keyboard="N" />
                <MenuItem title={"黏贴"} keyboard="P" />
                <MenuItem title={"排序"} keyboard="Y" />
            </ul>
        );
    }
}

//禁止右键
document.oncontextmenu = () => false;

let app = document.getElementById("app");

ReactDOM.render(<App />, app);

document.body.addEventListener("mousedown", e =>
{
    position.show = !position.show;
    position.x = e.clientX;
    position.y = e.clientY;
});
